<template>
  <div class="nav-header">
    <el-menu :default-active="activeIndex" class="nav-menu" :class="[style]" mode="horizontal">
      <el-menu-item index="0">
        <a :href="Options.links.website" :title="$root.lang.navbar.home"><img class="josh-logo" src="@/assets/public/logo.png"></a>
      </el-menu-item>
<!--       <el-dropdown class="lang-select pull-right" @command="changeLang">
        <span class="el-dropdown-link">
          {{ activeLang }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="index" :key="index" v-for="(item,index) in lang">{{ item.name }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
      <el-dropdown v-if="username" class="lang-select pull-right" @command="clickFunction">
        <span class="el-dropdown-link">
          {{ accountTypeName }} ：{{ username }} <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="control">{{ $root.lang.navbar.login.control }}</el-dropdown-item>
          <el-dropdown-item command="logout">{{ $root.lang.navbar.login.logOut }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-menu-item index="3" v-if="!username" class="pull-right"><a href="/regist">{{ $root.lang.navbar.regist }}</a></el-menu-item>
      <el-menu-item index="2" v-if="!username" class="pull-right"><a href="/">{{ $root.lang.navbar.doLogin }}</a></el-menu-item>
      <!-- <el-menu-item index="1" class="pull-right"><a href="/document">{{ $root.lang.navbar.document }}</a></el-menu-item> -->
      <el-menu-item index="1" class="pull-right"><a :href="Options.links.website + 'map'">{{ $root.lang.navbar.home }}</a></el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import lang from '@/options/lang'
import { getToken, setToken, removeToken } from '@/utils/auth'
export default {
  data () {
    return {
      activeIndex: this.index,
      activeLang: '',
      lang: lang,
      username: null,
      style: this.className,
      accountType: '',
      accountTypeName: '',
    }
  },
  props: {
    index: {
      type: String,
      default: ''
    },
    className: {
      type: String,
      default: ''
    }
  },
  created() {
    var lang = this.$root.getStorage('lang')
    this.activeLang = ((lang) ? this.lang[lang].name : '简体中文')
    this.username = this.Cookies.get('U')
    this.accountType = this.Cookies.get('T')
    if(this.accountType == 1) {
      this.accountTypeName = this.$root.lang.regist.personal
    } else if(this.accountType == 2) {
      this.accountTypeName = this.$root.lang.regist.enterprise
    } else {
      this.accountTypeName = this.$root.lang.regist.admin
    }
  },
  methods: {
    changeLang(value) {
      this.$root.setStorage('lang',value)
      window.location.reload()
    },
    clickFunction(value) {
      switch(value) {
        case 'control':
          window.location.href = '/home'
        break
        case 'logout':
          this.logout()
        break
      }
    },
    logout() {
      this.$confirm(
        this.$root.lang.navbar.notice.logOut.message,
        this.$root.lang.navbar.notice.logOut.title,
        {
          confirmButtonText: this.$root.lang.navbar.notice.logOut.confirm,
          cancelButtonText: this.$root.lang.navbar.notice.logOut.cancel,
          type: 'info'
        }
      ).then(() => {
        this.doLogOut()
      }).catch(() => {

      });
    },
    doLogOut() {
      this.request({
        url: '/system/logout',
        method: 'post',
        data: {}
      }).then(response => {
        this.Cookies.remove('U')
        this.Cookies.remove('I')
        this.Cookies.remove('T')
        this.Cookies.remove('S')
        this.Cookies.remove('O')
        this.Cookies.remove('V')
        this.Cookies.remove('B')
        this.Cookies.remove('L')
        this.Cookies.remove('M')
        this.$store.commit('REMOVE_STATUS')
        location.reload()
        window.location.href="/home"
      }).catch(error => {   
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/css/style.scss';
$font-color: #909399;
.nav-header {
  background-color: #ffffff;
  border-top: 4px solid $color-blue;
  border-bottom: solid 1px #e6e6e6;
  .nav-menu {
    padding: 0 25px;
    margin: 0 auto;
    width: 1150px;
  }
  .auto-width {
    width: auto;
  }
  .el-menu-item {
    padding: 0;
    margin: 0 20px;
  }
  .josh-logo {
    height: 26px;
  }
  .lang-select {
    display: block;
    margin: 0 15px;
    height: 60px;
    line-height: 60px;
    color: $font-color;
    cursor: pointer;
  }
  .lang-select:hover {
    color: inherit;
  }
  .el-dropdown-link {
    display: block!important;
  }
  .el-menu.el-menu--horizontal {
    border-bottom: 0;
  }
  a {
    display: block;
    height: 100%;
    text-decoration: none;
  }
}
.el-dropdown-menu a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

</style>
